<template>
  <div>
    <div class="company-top">
      <p class="company-title">{{commentlist.fullName}}</p>
      <p class="company-time">{{commentlist.entryTime}}-{{commentlist.resignedTime?commentlist.resignedTime:'至今'}}</p>
    </div>
    <div class="company-content" v-for="item in _isMoreContent">
      <div class="inn-content">
        <img class="content-img" :src="item.facePhoto" alt="">
        <div class="content-right">
          <div style="position: relative">
            <span class="boss-name">{{item.realName}}</span>
            <span class="boss">{{item.position}}</span>
            <span class="boss-reply" @click="replyMessage_2(item,commentlist)">回复</span>
          </div>
          <p class="boss-time">{{item.createTime}}</p>
          <div class="right-content">
            <p>{{item.content}}</p>
          </div>
          <div class="reply-txt" v-for="val in item.childCommentInfoList" @click="replyMessage(val,item,commentlist)">
            <div class="reply-men" style="position: relative">
              <p class="default-size">
                <span class="reply-color">{{val.replyPerson}}</span>
                &nbsp回复&nbsp
                <span class="reply-color">{{val.returnedPerson}}</span>
                <span class="men-reply">{{val.createTime}}</span>
              </p>
              <div class="reply-content">
                {{val.content}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="commentlist.commentList.length > 1" class="company-footer" @click="showMoreReply">
      {{footBtn}}<span v-if="!showMorelist">&nbsp&nbsp({{commentlist.commentList.length-1}}条)</span>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'comment',
        data () {
            return {
              showMorelist:false,
              replyFoote:'',
              isMoreContent:''
            }
        },
        computed:{
          footBtn(){
            if (this.showMorelist){
              return this.replyFoote = '收起职说'
            }else {
              return this.replyFoote = '展开职说'
            }
          },
          _isMoreContent(){
            if (this.showMorelist){
              var oData = this.commentlist;
              return this.isMoreContent = oData.commentList;
            }else {
              var oData = [];
              var k_data = this.commentlist.commentList[0];
              console.log('你麻痹'+k_data)
              oData.push(k_data);
              return this.isMoreContent = oData;
            }
          }

        },
        props:['commentlist'],
        methods:{
          showMoreReply(){
            this.showMorelist = !this.showMorelist
          },
          replyMessage(val,val2,val3){
            console.log(val)
            this.$emit('showReplyInput',val,val2,val3)
          },
          replyMessage_2(val,val2){
            console.log(val,val2)
            this.$emit('showReplyInput_2',val,val2)
          }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .company-top{
    padding: 1.5rem;
    border-bottom: 1px solid #F2F2F2;
  }
  .company-title{
    font-size: 1.4rem;
    color: #212121;
    letter-spacing: 0;
    line-height: 14px;
  }
  .company-time{
    font-size: 1.2rem;
    color: #808080;
    letter-spacing: 0;
    line-height: 1.2rem;
    margin-top: 0.8rem;
  }
  .company-content{
    padding: 1.5rem;
  }
  .content-img{
    float: left;
    width:4.4rem;
    height:4.4rem;
    border-radius: 50%;
  }
  .content-right{
    margin-left: 20%;
    width:80%;
  }
  .boss-name{
    font-size: 1.8rem;
    color: #212121;
    line-height: 1.2rem;
  }
  .boss{
    font-size: 1.4rem;
    color: #808080;
    letter-spacing: 0;
    line-height: 1.2rem;
    margin-left: 0.6rem;
  }
  .boss-reply{
    position: absolute;
    right:0;
    top:-0.1rem;
    font-size: 1.4rem;
    color: #F89721;
    letter-spacing: 0;
  }
  .boss-time{
    font-size: 1.2rem;
    color: #808080;
    letter-spacing: 0;
    line-height: 2rem;
  }
  .right-content{
    font-size: 1.4rem;
    color: #212121;
    letter-spacing: 0;
    line-height: 2.2rem;
    text-align: justify;
  }
  .reply-txt{
    background: #F5F5F5;
    border: 1px solid #EEEEEE;
    border-radius: 3px;
    padding: 1rem;
  }
  .men-reply{
    position: absolute;
    right:0;
    font-size: 1.2rem;
    color: #A0A0A0;
    letter-spacing: 0;
    line-height: 1.8rem;
  }
  .default-size{
    font-size: 1.2rem;
  }
  .reply-color{
    font-size: 1.4rem;
    color: #429EDF;
  }
  .reply-content{
    font-size: 1.3rem;
  }
  .company-footer{
    font-size: 1.2rem;
    height:3.8rem;
    border-top: 1px solid #F2F2F2;
    border-bottom: 1px solid #F2F2F2;
    text-align: center;
    line-height: 3.7rem;
    color: #F89721;
  }
</style>
